<template>
    <div class="lunarFullCalendar">
        <div class="topCalendar">
<!--            <span class="post">上岗</span>-->
            <Button class="logo" @click="queryRecord">查看上岗离岗日志</Button>
<!--            <span>-->
<!--            <label>工作日历:</label>-->
<!--            <Select v-model="model1" style="width:200px">-->
<!--                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--            </Select>-->
<!--        </span>-->
        </div>
        <div class="full-calendar">
            <Button class="span" @click="updateCalendar">批量设定日历</Button>
            <lunar-full-calendar
                :events="events"
                ref="calendar"
                @event-selected="eventSelected"
                :config="config"
                @day-click="dayClick"
            ></lunar-full-calendar>
        </div>
        <div>
            <Modal :title="shopCalendarTitle" v-model="shopCalendarModal" :mask-closable='false' :width="600" :styles="{top: '90'}">
                <Form ref="formItem" :model="formItem" :label-width="90" :rules="priorityFormValidate" style="height:330px">
                    <FormItem label="设定日期" prop="setDate">
                        <DatePicker  :value="formItem.setDate" @on-change="updateSetDate" type="date" multiple placeholder="选择日期" style="width: 300px"></DatePicker>
                    </FormItem>
                    <FormItem label="星期" style="margin-top: -10px;" prop="week">
                        <CheckboxGroup v-model="formItem.week">
                            <Checkbox label="星期一"></Checkbox>
                            <Checkbox label="星期二"></Checkbox>
                            <Checkbox label="星期三"></Checkbox>
                            <Checkbox label="星期四"></Checkbox>
                            <Checkbox label="星期五"></Checkbox>
                            <Checkbox label="星期六"></Checkbox>
                            <Checkbox label="星期日"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                    <FormItem label="工作状态" style="margin-top: -10px;" prop="workStatus">
                        <RadioGroup v-model="formItem.workStatus" @on-change="checkChangeWorkStatus">
                            <Radio label="工作">工作</Radio>
                            <Radio label="休息">休息</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="工作时间" style="margin-top: -10px" prop="amTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                        <TimePicker v-model="formItem.amTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="上午" style="width: 230px"></TimePicker>
                    </FormItem>
                    <FormItem label="" style="margin-top: -55px;margin-left: 248px" prop="pmTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                        <TimePicker v-model="formItem.pmTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="下午" style="width: 230px"></TimePicker>
                    </FormItem>
                    <FormItem label="备注" style="margin-top: -5px;">
                        <Input v-model="formItem.remarks" type="textarea" :rows="4" placeholder="Enter something..." />
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="cancel">取消</Button>
                    <Button type="primary" @click="submit">提交</Button>
                </div>
            </Modal>
        </div>
        <div>
            <Modal :title="shopCalendarTitle" v-model="shopCalendarModal2" :mask-closable='false' :width="600" :styles="{top: '90'}">
                <Form ref="formItem2" :model="formItem2" :label-width="90" :rules="priorityFormValidate2" style="height:250px">
                    <FormItem label="工作状态" style="margin-top: -10px;" prop="workStatus">
                        <RadioGroup v-model="formItem2.workStatus" @on-change="checkChangeWorkStatus">
                            <Radio label="工作">工作</Radio>
                            <Radio label="休息">休息</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="工作时间" style="margin-top: -10px" prop="amTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                        <TimePicker v-model="formItem2.amTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select am" style="width: 230px"></TimePicker>
                    </FormItem>
                    <FormItem label="" style="margin-top: -55px;margin-left: 248px" prop="pmTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                        <TimePicker v-model="formItem2.pmTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select pm" style="width: 230px"></TimePicker>
                    </FormItem>
                    <FormItem label="备注" style="margin-top: -5px;">
                        <Input v-model="formItem2.remarks" type="textarea" :rows="4" placeholder="Enter something..." />
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="cancel">取消</Button>
                    <Button type="primary"  @click="refer">提交</Button>
                </div>
            </Modal>
        </div>
        <div>
            <Modal :title="postTitle" v-model="postModalVisible" :mask-closable='false' @on-cancel="cancelPost" :width="1100" :styles="{top: '90px'}" :footer-hide="true">
                <div>
                    <rui-page :defines="defines">
                        <rui-table :defineId="'postInfo'"
                                   :select="false"
                                   @loadDatas="queryPostInfo"
                                   ref="postInfoTable">
                        </rui-table>
                    </rui-page>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
    let postInfo = [
        {
            key: 'userName',
            title: '岗位异动人',
            align: 'center',
        },
        {
            key: "postChangeStatus",
            title: "岗位异动状态",
            align: 'center',
            render: (h, params) => {
                let enable = '';
                let color = '';
                let arr = params.row.postChangeStatus;
                if(arr==="0"){
                    enable = '离岗';
                }else if (arr==="1") {
                    enable = '在岗';
                }else {
                    enable = '';
                }
                return h('div', {
                    domProps: {
                        innerHTML: enable,
                    },
                    style: {
                        color: color
                    }
                })
            }
        },
        {
            key: "changeRemarks",
            title: "岗位异动备注",
            align: 'center',
        },
        {
            key: 'createBy',
            title: '操作人',
            align: 'center',
        },
        {
            key: 'createTime',
            title: '操作时间',
            align: 'center',
        }
    ]
    import {getScheduleInfo,getAllLabelList,batchUpdateCalendar,updateDay,queryOpraHolidayInfo} from  "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    import { LunarFullCalendar } from './calendar';
    import {queryPostChangeLog} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        components: {
            LunarFullCalendar
        },
        data: function () {
            let validate = function(rule, value, callback) {
                if (Array.isArray(value)) { //格式为：daterange、datetimerange检测
                    value.map(function (item) {
                        if (item === "") {
                            return callback("日期不能为空")
                        }
                    })
                } else { //格式为：date、datetime、year、month 检测
                    if (value === '') {
                        return callback("日期不能为空")
                    }
                }
                return callback();
            };
            let workStatusValidate = function(rule, value, callback) {
                if (value.length === 0) {
                    return callback("工作状态不能为空")
                }
                return callback();
            };
            let setDateValidate = function(rule, value, callback) {
                if (value[0]  === null) {
                    return callback("日期不能为空")
                }
                return callback();
            };
            let self = this;
            return {
                //上离岗
                postTitle:"上离岗日志",
                postModalVisible:false,
                searchForm:{
                    pageNumber: 1,
                    pageSize: 10,
                    userId:""
                },
                changeTimeRequired:false,
                shopCalendarTitle:"日历设定",
                shopCalendarModal:false,
                shopCalendarModal2:false,
                week:[],
                formItem:{
                    date:"",
                    setDate:"",
                    oneBiweekly:"",
                    workStatus:"",
                    amTime:"",
                    pmTime:"",
                    remarks:"",
                    week:[],
                },
                formItem2:{
                    date:"",
                    workStatus:"",
                    amTime:"",
                    pmTime:"",
                    remarks:"",
                },
                priorityFormValidate: {
                    setDate: [{required: true, validator: setDateValidate, trigger: 'change' }],
                    workStatus:[{required: true,validator: workStatusValidate, trigger: "change"}],
                },
                priorityFormValidate2:{
                    workStatus:[{required: true,validator: workStatusValidate, trigger: "change"}],
                },
                timeCheck: [
                    {required: false}
                ],
                timeValidate: [
                    {required: true,validator: validate,trigger: 'change'}
                ],
                cityList:[
                    {
                        value: 'New York',
                        label: '系统工作日历'
                    },
                    {
                        value: 'London',
                        label: '个人工作日历'
                    },
                ],
                workTimeList:[
                    {
                        value: '08:30-12:00',
                        label: '08:30-12:00'
                    },
                    {
                        value: '13:00-17:30',
                        label: '13:00-17:30'
                    },
                ],
                model1:"",
                events: [
                ],
                config: {
                    // lunarCalendar
                    // Control whether the Chinese calendar shows true, unrealistic flase, default true.（lunarCalendar控制是否显示中国农历、显示的为true，隐藏为flase，默认为true）
                    lunarCalendar: true,
                    // height: 'parent',
                    locale: 'zh-cn',
                    buttonText: {
                        today: '今天',
                        month: '月',
                        week: '周',
                        day: '日'
                    },
                    header: {
                        //   left: 'prev,next,prevYear,nextYear today',
                        //   center: 'title',
                        left: 'today',
                        center: 'prevYear,prev,title,next,nextYear,',
                        right:"hide custom"

                    },
                    // eventOrder:'index',   // 这个是控制事件排序的功能，意思是 按照字段 事件数据中index来排序
                    // eventLimitClick: 'day', //点击今天日列表图
                    eventLimit: true, // 一天中显示多少条事件，多了隐藏
                    firstDay: 1, // 控制周一周日那个在前面
                    defaultView: 'month',
                    allDaySlot: true, // agenda视图下是否显示all-day
                    allDayText: '全天', // agenda视图下all-day的显示文本
                    timezone: 'local', // 时区默认本地的
                    slotLabelFormat: 'HH:mm', // 周视图和日视同的左侧时间显示
                    viewRender (view, element) {
                        self.viewRender(view, element)
                    },
                    customButtons: {
                        // 新增按钮
                        // hide: {
                        //   text: '隐藏农历',
                        //   click: function () {
                        //     self.$refs.calendar.fireMethod('option', {
                        //       lunarCalendar: false
                        //     })
                        //     self.$refs.calendar.fireMethod('option', {
                        //       header: {
                        //         left: 'prev,next, today',
                        //         center: 'title',
                        //         right: 'show, custom, month,agendaWeek,agendaDay'
                        //       }
                        //     })
                        //   }
                        // },
                        // show: {
                        //   text: '显示农历',
                        //   click: function () {
                        //     self.$refs.calendar.fireMethod('option', {
                        //       lunarCalendar: true
                        //     })
                        //     self.$refs.calendar.fireMethod('option', {
                        //       header: {
                        //         left: 'prev,next, today',
                        //         center: 'title',
                        //         right: 'hide, custom, month,agendaWeek,agendaDay'
                        //       }
                        //     })
                        //   }
                        // }
                    },
                }
            }
        },
        methods: {
            // 注释的是功能是可以修改对应的功能值属性，比如设置  eventLimit为 false
            //  this.$refs.calendar.fireMethod('option',{
            //      eventLimit :false
            //  })
            //更新当天日程
            dayClick (date, jsEvent, view) {
                let month = new Date().getMonth()+ 1;
                let time1 = new Date().getFullYear()+"-"+month+"-"+new Date().getDate();
                let time2 = date._d.getFullYear()+"-"+(date._d.getMonth()+1)+"-"+date._d.getDate();
                if(Date.parse(time1.trim().replace(/-/g, '/'))>Date.parse(time2.trim().replace(/-/g, '/'))){
                    this.$Message.warning("日期已过期，请重新选择修改！");
                    return;
                }
                this.formItem2.date = date;
                this.$refs.formItem2.resetFields();
                this.shopCalendarModal2 = true;
                this.changeTimeRequired = true;
                this.formItem2.remarks = "";
                this.getPersonalInfo();
            },
            eventSelected (event, jsEvent, view) {
                // 选中事件
                console.log(event, jsEvent, 'eventSelected')
            },
            viewRender (view, element) {
                // console.log(view, element, 'viewRender')
            },
            getTitle(){
                getScheduleInfo().then(res=>{
                    if(res.code === "0000"){
                        this.events = res.data;
                    }
                })
            },
            //取消
            cancel(){
                this.shopCalendarModal = false;
                this.shopCalendarModal2 = false;
            },
            //批量设定日历
            updateCalendar(){
                this.$refs.formItem.resetFields();
                this.formItem.setDate = "";
                this.formItem.remarks = "";
                this.shopCalendarModal = true;
                this.changeTimeRequired = true;
            },
            //提交
            submit(){
                this.$refs.formItem.validate(valid => {
                    if(valid){
                        let str = [];
                        let month = new Date().getMonth()+ 1;
                        let time1 = new Date().getFullYear()+"-"+month+"-"+new Date().getDate();
                        str = this.formItem.setDate.split(",");
                        for (let i = 0; i < str.length; i++) {
                            let key = str[i];
                            let time2 = key.substring(0, 4) + "-" + key.substring(5, 7) + "-" + key.substring(8, 10);
                            if (Date.parse(time1.trim().replace(/-/g, '/')) > Date.parse(time2.trim().replace(/-/g, '/'))) {
                                this.$Message.warning("日期:" + time2 + "已过期，请重新修改！");
                                return;
                            }
                        }
                        batchUpdateCalendar(this.formItem).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.getTitle();
                                this.shopCalendarModal = false;
                            }
                        });
                    }
                })
            },
            //提交
            refer(){
                this.$refs.formItem2.validate(valid => {
                    if(valid){
                        updateDay(this.formItem2).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.getTitle();
                                this.shopCalendarModal2 = false;
                            }
                        })
                    }
                })
            },
            //工作状态选择
            checkChangeWorkStatus(v){
                if(v === "工作"){
                    this.changeTimeRequired = false;
                }else{
                    this.changeTimeRequired = true;
                }
            },
            //查看上离岗记录
            queryRecord(){
                this.postModalVisible = true;
                this.queryPostInfo(1,10);
            },
            //取消上离岗日志查询
            cancelPost(){
                this.postModalVisible = false;
                this.$refs.postInfoTable.resetData();
            },
            //上离岗记录查询
            queryPostInfo(pageNumber, pageSize){
                this.searchForm.pageNumber = pageNumber;
                this.searchForm.pageSize = pageSize;
                queryPostChangeLog(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        let {records, total} = res.data;
                        this.$refs.postInfoTable.updateTableData(records, total);
                    }
                })
            },
            //设定日期选择
            updateSetDate(v){
                let dateList = v.toString();
                this.formItem.setDate = dateList;
            },
            //查询个人当天日程信息
            getPersonalInfo(){
                queryOpraHolidayInfo(this.formItem2).then(res=>{
                    if(res.code === "0000"){
                        this.formItem2.workStatus = res.data.workFlagAm;
                        let timeAm = [];
                        timeAm.push(res.data.timeAm.slice(0, 5));
                        timeAm.push(res.data.timeAm.slice(6, 11));
                        this.formItem2.amTime = timeAm;
                        let timePm = [];
                        timePm.push(res.data.timePm.slice(0, 5));
                        timePm.push(res.data.timePm.slice(6, 11));
                        this.formItem2.pmTime = timePm;
                        this.formItem2.remarks = res.data.remarks;
                        if(res.data.workFlagAm === "工作"){
                            this.changeTimeRequired = false;
                        }else{
                            this.changeTimeRequired = true;
                        }
                    }
                })
            },
        },
        //初始化
        mounted() {
            this.getTitle();
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'postInfo',
                        fields: postInfo
                    }
                ]
            }
        }
    }
</script>
<style>
    .lunarFullCalendar{
        background: white;
        padding: 5px 0 0 10px;
    }
    .lunarFullCalendar .post,.lunarFullCalendar .logo{
        background: #09a8e9;
        padding:10px;
        border-radius: 5px;
        height: 40px;
        color: white;
    }
    .lunarFullCalendar .logo{
        color:white;
    }
    .lunarFullCalendar .topCalendar{
        margin-bottom: 10px;
    }
    .full-calendar{
        position: relative;
    }
    .span{
        position: absolute;
        background: #09a8e9;
        padding: 10px;
        border-radius: 5px;
        color: white;
        right: 0px;
        height: 40px;
    }
    .full-calendar .fc-center h2{
        margin:0 10px;
    }
    .fc-prevYear-button {
        border-radius:5px 0 0 5px;
    }
    .fc-nextYear-button{
        border-radius: 0 5px 5px 0;
    }

</style>

